<template>
  <div class="login">
    <h3 class="login-title" v-if="passwordCredentials">账号密码登录</h3>
    <h3 class="login-title" v-if="captchaCredentials">验证码登录</h3>
    <p class="login-safe-tips">为了你的帐号安全，请用手机号登录</p>
    <phone-password-form v-model="phoneValue" :loading="loading" @submit="handleLogin" v-if="passwordCredentials"/>
    <phone-captcha-form v-model="phoneValue" :loading="loading" @submit="handleLogin" v-if="captchaCredentials"/>
    <div class="login-other-actions">
      <van-button plain type="info" size="small" v-if="passwordCredentials" @click.stop="handleCaptchaGrant">验证码登录</van-button>
      <van-button plain type="info" size="small" v-if="captchaCredentials" @click.stop="handlePasswordGrant">密码登录</van-button>
      <div class="login-other-actions-right">
        <van-button plain type="info" size="small" v-if="passwordCredentials">忘记密码</van-button>
        <divider v-if="passwordCredentials"/>
        <van-button plain type="info" size="small" to="/register">免费注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import WingBlank from "@/components/WingBlank"
import { Button, Field, Form, Toast } from "vant"
import Divider from "@/components/Divider"
import { message, security } from "@mall/api-services"
import PhonePasswordForm from "@/views/user/PhonePasswordForm"
import PhoneCaptchaForm from "@/views/user/PhoneCaptchaForm"
import md5 from "crypto-js/md5"

const { CredentialsType } = security
export default {
  name: "Login",
  components: {
    PhoneCaptchaForm,
    PhonePasswordForm,
    Divider,
    WingBlank,
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
  },
  props: {
    phone: String,
    credentialsType: {
      type: String,
      default: CredentialsType.PhonePassword,
    },
  },
  computed: {
    captchaCredentials() {
      return this.credentialsType === CredentialsType.Captcha
    },
    passwordCredentials() {
      return this.credentialsType === CredentialsType.PhonePassword
    },
    credentialsTypeValue: {
      get() {
        return this.credentialsType
      },
      set(credentialsType) {
        const { phone } = this
        this.$router.replace({
          path: "/login",
          query: {
            phone,
            credentials_type: credentialsType,
          },
        })
      },
    },
  },
  data() {
    return {
      loading: false,
      phoneValue: "",
    }
  },
  created() {
    this.phoneValue = this.phone
  },
  methods: {
    handleCaptchaGrant() {
      this.credentialsTypeValue = CredentialsType.Captcha
    },
    handlePasswordGrant() {
      this.credentialsTypeValue = CredentialsType.PhonePassword
    },
    handleLogin(values) {
      if (this.credentialsTypeValue === CredentialsType.PhonePassword) {
        const password = md5(values.password).toString()
        const credentials = new security.PhonePasswordCredentials()
        credentials.countryCode = "86"
        credentials.phone = values.phone
        credentials.password = password
        this.phonePasswordLogin(credentials)
      } else if (this.credentialsTypeValue === CredentialsType.Captcha) {
        const credentials = new security.CaptchaCredentials()
        credentials.captchaToken = values.captchaToken
        credentials.captchaCode = values.captchaCode
        this.phonePasswordLogin(credentials)
      } else {
        Toast("不支持此方式登录")
      }
    },
    phonePasswordLogin(credentials) {
      this.loading = true
      security.SubjectHolder.authenticate(credentials)
          .then(() => this.$router.back())
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.loading = false)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.login {
  padding: 20px 20px;

  .login-title {
    font-size: 24px;
    line-height: 1rem;
    font-weight: 500;
  }

  .login-safe-tips {
    font-size: 14px;
    color: $gray-6;
    margin-top: 20px;
    line-height: 14px;
  }

  ::v-deep .van-field {
    background: inherit;
    padding: 10px 0;

    .van-field__label {
      width: 70px;
      flex: initial;
    }

    &:after {
      left: 0;
    }
  }

  .login-mobile-field {

    ::v-deep .van-field__label {
      margin: 0;
      position: relative;

      &:after {
        content: ' ';
        position: absolute;
        bottom: 0;
        top: 4px;
        background: $gray-4;
        width: 2px;
        height: 14px;
        transform: scaleX(0.5);
        transform-origin: 0 0;
        margin: 0 10px;
      }
    }
  }

  .login-other-actions {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-button {
      border: none;
      padding: 0;
      height: initial;
      background: inherit;
      min-width: initial;

      &:before {
        background: inherit;
      }
    }

    .login-other-actions-right {
      display: inline-flex;
    }
  }
}
</style>
